<template>
  <div>
    <div class="h_header flexrowbetween">
      <span>今日总计划/今日投放中计划</span>
      <SelectTime @changeTime="changeTime" />
      <!-- <div class="flex aligncenter">
        <div
          v-for="(item, index) in days"
          :key="index"
          class="dataname f-14 commhover"
          :class="{ active: daynum == item.value }"
          @click="handleClick(item)"
        >
          {{ item.name }}
        </div>
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div> -->
    </div>
    <el-row :gutter="25" class="h_content">
      <el-col :span="4">
        <div class="activebox bg_F8F8F8 mb_30 mt_20">
          <div class="f-14 c_000 mb_10">今日总计划</div>
          <div class="flex aligncenter">
            <div class="f-24 c_000 mr_8">23333</div>
            <div class="f-14 c_000">个</div>
          </div>
        </div>
        <div class="activebox bg_F8F8F8 mb_30 mt_20">
          <div class="f-14 c_000 mb_10">今日投放中计划</div>
          <div class="flex aligncenter">
            <div class="f-24 c_000 mr_8">23333</div>
            <div class="f-14 c_000">个</div>
          </div>
        </div>
        <div class="activebox bg_F8F8F8 mb_30 mt_20">
          <div class="f-14 c_000 mb_10">今日暂停计划</div>
          <div class="flex aligncenter">
            <div class="f-24 c_000 mr_8">23333</div>
            <div class="f-14 c_000">个</div>
          </div>
        </div>
        <div class="activebox bg_F8F8F8 mb_30 mt_20">
          <div class="f-14 c_000 mb_10">今日待审核计划</div>
          <div class="flex aligncenter">
            <div class="f-24 c_000 mr_8">23333</div>
            <div class="f-14 c_000">个</div>
          </div>
        </div>
      </el-col>
      <el-col :span="20">
        <line-chart :chart-data="lineChartData" height='240px' />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import LineChart from '@/components/Echart/LineChart'
import SelectTime from "./SelectTime.vue";
export default {
  data() {
    return {
      dayname:'今日',
      time:'',
      lineChartData:{
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
      }
    };
  },
  props: {
    title: {
      default: "",
    },
  },
  components:{
    LineChart,
    SelectTime
  },
  methods: {

    // 选择时间
    changeTime(params) {
      // console.log(params)
      this.dayname = params.item.name
      if(params.item.value == 1){
        this.getHourList()
      }else if(params.item.value == 2||params.item.value == 3){
        this.getDayList(params.params)
      }else if(params.item.value == 4){
        this.getMonthList(params.params)
      }else{
        this.getDayList(params.params)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.h_header {
  border-bottom: 1px solid #d5d5d5;
  height: 55px;
  padding: 0 15px;
}
.dataname {
  margin-right: 18px;
  color: #8e8e8e;
  position: relative;
  &.active {
    color: #000;
  }
  &.active::after {
    position: absolute;
    content: "";
    width: 28px;
    height: 2px;
    background-color: #1670f1;
    bottom: -6px;
    left: 0;
  }
}
.h_content{
  padding: 25px;
}
.activebox{
  width: 100%;
  max-width: 240px;
  height: 82px;
  padding: 15px 24px;
}
</style>
